<template>
  <div class="freightedit">
    <el-dialog
      :title="text"
      :visible.sync="dialogFreight"
      width="60%">
      <el-form :model="form" ref="form" size="medium" label-width="120px">
        <el-form-item label="模板名称:" prop="template">
          <el-input v-model="form.template" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="计费方式:" prop="billing_way">
          <el-radio-group v-model="form.billing_way">
            <el-radio :label="0">按件数</el-radio>
            <el-radio :label="1">按重量</el-radio>
            <el-radio :label="2">按体积</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="配送区域及运费:">
          <el-table
            :data="fdata"
            class="table"
            stripe border
            :header-cell-style="{background:'#f3f3f3',textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="area" label="可配送区域">
              <template slot-scope="scope">
                <el-input size="medium" v-model="scope.row.area"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="first_thing">
              <template slot="header" slot-scope="scope">
                <span v-if="form.billing_way == 0">首件</span>
                <span v-if="form.billing_way == 1">首件重量(KG)</span>
                <span v-if="form.billing_way == 2">首件体积(m^3)</span>
              </template>
              <template slot-scope="scope">
                <el-input size="medium" v-model="scope.row.first_thing"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="freight" label="运费(元)">
              <template slot-scope="scope">
                <el-input size="medium" v-model="scope.row.freight"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="continue_thing">
              <template slot="header" slot-scope="scope">
                <span v-if="form.billing_way == 0">续件</span>
                <span v-if="form.billing_way == 1">续件重量(KG)</span>
                <span v-if="form.billing_way == 2">续件体积(m^3)</span>
              </template>
              <template slot-scope="scope">
                <el-input size="medium" v-model="scope.row.continue_thing"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="renewal" label="续费(元)">
              <template slot-scope="scope">
                <el-input size="medium" v-model="scope.row.renewal"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
            </el-table-column>
          </el-table>
          <el-button class="mt-30" type="primary">单独添加配送区域</el-button>
        </el-form-item>
        <el-form-item label="指定包邮:" prop="assign_mail">
          <el-radio-group v-model="form.assign_mail">
            <el-radio :label="0">开 启</el-radio>
            <el-radio :label="1">关 闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input v-model="form.sort" placeholder="排序"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name:'FreightEdit',
    props:{
      rows: {}
    },
    data() {
      return {
        text: '',
        dialogFreight: false,
        fdata: [],
        form: {
          template: '',
          billing_way: '',
          assign_mail: '',
          sort: ''
        }
      }
    },
    methods: {
      //打开弹窗-编辑
      openEdit() {
        this.dialogFreight = true;
        this.text = "编辑物流公司"
        this.form = {
          template: this.rows.template,
          billing_way: this.rows.billing_way,
          delivery: this.rows.delivery,
          assign_mail: this.rows.assign_mail,
          sort: this.rows.sort
        }
        this.fdata = this.rows.freightData;
        console.log('fdata',this.fdata)
        console.log('form',this.form)
      },
      //打开弹窗-新增
      openAdd() {
        this.dialogFreight = true;
        this.text = "添加物流公司";
        this.fdata = [
          {
            area: '',
            first_thing: '',
            freight: '',
            continue_thing: '',
            renewal: ''
          }
        ];
      },

      //保存
      save () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            console.log('form1',this.form)
            console.log('fdata1',this.fdata)
            this.dialogFreight = false;
            this.form = {
              template: '',
              billing_way: '',
              delivery: '',
              assign_mail: '',
              sort: ''
            };
            this.fdata = [
              {
                area: '',
                first_thing: '',
                freight: '',
                continue_thing: '',
                renewal: ''
              }
            ];
            console.log('form2',this.form)
            this.$message.success('保存成功')
          } else {
            this.$message.error('表单验证失败!')
          }
        })
      },

      //关闭
      close() {
        this.dialogFreight = false;
        this.form = {
          template: '',
          billing_way: '',
          delivery: '',
          assign_mail: '',
          sort: ''
        }
        this.fdata = [
          {
            area: '',
            first_thing: '',
            freight: '',
            continue_thing: '',
            renewal: ''
          }
        ];
      }
    }
  }
</script>

<style>
</style>
